import React, { useEffect, useState } from "react";
import { MessageOutline, UserOutline, RightOutline, BellOutline, HandPayCircleOutline, CheckShieldOutline, GlobalOutline, LockOutline, AppstoreOutline, EyeOutline, TruckOutline, UserAddOutline } from 'antd-mobile-icons'
import { Switch, Popup } from 'antd-mobile'
import '../../css/lmy/Lmy.css'
import { useNavigate } from 'react-router-dom'
import instance from "../../request/request";
const App = () => {
    const [isDarkMode, setIsDarkMode] = useState(() => {
        const savedMode = localStorage.getItem('darkMode');
        return savedMode ? JSON.parse(savedMode) : false;
    });
    const toggleDarkMode = () => {
        setIsDarkMode(prevMode => {
            const newMode = !prevMode;
            // 保存到 localStorage
            localStorage.setItem('darkMode', JSON.stringify(newMode));
            // 设置 data-theme 属性
            document.documentElement.setAttribute(
                'data-theme',
                newMode ? 'dark' : 'light'
            );
            return newMode;
        });
    };

    const navigate = useNavigate()
    const [visible1, setVisible1] = useState(false)
    const [lemail,setLemail] = useState('')
    const [lphone,setLphone] = useState('')
    //数据
    const [data, setData] = useState({})
    function getData() {
        instance.get('/lLogin', {
            params: {
                lemail:localStorage.getItem('lemail'),
                lphone:localStorage.getItem('lphone')
            }
        }).then(res => {
            console.log(res)
            if (res.data.code === 200) {
                setData(res.data.data)
            }
        })


    }
    useEffect(() => {
        getData()
    }, [])
    useEffect(() => {
        const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
        link.type = 'image/x-icon';
        link.rel = 'shortcut icon';
        link.href = './listimgs/icon.jpg'; // 替换为新图标路径
        document.getElementsByTagName('head')[0].appendChild(link);
        document.title = '个人中心';
    }, []);
    return (
        <div className="box">
            {visible1 ? ('') : (<div>
                <div className="lasd">
                    <div className="lassdd"></div>
                    <div className="lmy_header">
                        <div>
                            <h4 style={{ display: 'flex' }}>
                                <div style={{ flex: 1 }}>
                                    <img src="/xiaoxi.png" />
                                </div>
                                <div>
                                    我的
                                </div>
                            </h4>
                        </div>
                        <div>
                            <MessageOutline className="mes" onClick={() => {
                                navigate('/lmsg')
                            }} />
                        </div>
                    </div>
                    <div className="lmy_img">
                        <img src={'http://localhost:3000/'+data.img} className="lmy_imgB" />
                        <h3>{data.name}</h3>
                        <p>{data.email}</p>
                    </div>
                </div>
                {/* 个人信息 */}
                <div onClick={() => {
                    navigate('/lourself')
                }}
                    className="lmy_person">
                    <div >
                        <h3>
                            <UserOutline className="icon" />
                            &nbsp;
                            个人信息
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 通知设置 */}
                <div onClick={() => {
                    navigate('/lnotify')
                }}
                    className="lmy_person">
                    <div>
                        <h3>
                            <BellOutline className="icon" />
                            &nbsp;
                            通知设置
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 支付设置 */}
                <div onClick={() => {
                    navigate('/pays')
                }}
                    className="lmy_person">
                    <div>
                        <h3>
                            <HandPayCircleOutline className="icon" />
                            &nbsp;
                            支付设置
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 安全设置 */}
                <div
                    onClick={() => {
                        navigate('/lserity')
                    }}
                    className="lmy_person">
                    <div>
                        <h3>
                            <CheckShieldOutline className="icon" />
                            &nbsp;
                            安全设置
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 语言设置 */}
                <div
                    className="lmy_person">
                    <div>
                        <h3>
                            <GlobalOutline className="icon" />
                            &nbsp;
                            语言设置
                        </h3>
                    </div>
                    <div>
                        <b className="bbb">简体中文</b>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 深色模式 */}
                <div 
                    className="lmy_person">
                    <div>
                        <h3>
                            <EyeOutline className="icon" />
                            &nbsp;
                            深色模式
                        </h3>
                    </div>
                    <div>
                        <Switch
                        defaultChecked={isDarkMode}
                        onChange={()=>{
                            toggleDarkMode();
                           
                        }}
                            style={{
                                '--checked-color': '#7210FF',
                                '--height': '24px',
                                '--width': '48px',
                            }}
                        />
                    </div>
                </div>
                {/* 隐私协议 */}
                <div
                    className="lmy_person">
                    <div>
                        <h3>
                            <LockOutline className="icon" />
                            &nbsp;
                            隐私协议
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 帮助中心 */}
                <div
                    className="lmy_person">
                    <div>
                        <h3>
                            <AppstoreOutline className="icon" />
                            &nbsp;
                            帮助中心
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 好友邀请 */}
                <div
                    className="lmy_person">
                    <div>
                        <h3>
                            <UserAddOutline className="icon" />
                            &nbsp;
                            好友邀请
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
                {/* 退出登录 */}
                <div
                    className="lmy_person" onClick={() => {
                        setVisible1(true)
                    }}>
                    <div>
                        <h3 style={{ color: 'red' }}>
                            <TruckOutline className="icon" />
                            &nbsp;
                            退出登录
                        </h3>
                    </div>
                    <div>
                        <RightOutline className="icon" />
                    </div>
                </div>
            </div>)}
            <div>
                <Popup
                    visible={visible1}
                    onClose={() => {
                        setVisible1(false)
                    }}
                    bodyStyle={{ height: '30vh', borderTopLeftRadius: 40, borderTopRightRadius: 40 }}
                >
                    <br />
                    <p className="lttt"><span style={{ color: 'red' }}>退出登录</span></p>
                    <br />
                    <p className="lpexit">你确定要退出登录？</p>
                    <br />
                    <div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
                        <button className="lcancle" onClick={() => {
                            setVisible1(false)
                        }}>取消</button>
                        <button className="lcancleexit" onClick={() => {
                            navigate('/zh')
                        }}>退出登录</button>
                    </div>
                </Popup>
            </div>
        </div>
    )
}
export default App